<template>
	<view class="publish-page">

		<view class="ad-info">添加收货地址</view>

		<view class="item">
			<view class="title">收货人</view>
			<input type="text" class="item-input" value="" v-model="name" placeholder="收货人姓名" />
		</view>
		<view class="item">
			<view class="title">手机号</view>
			<input type="text" class="item-input" value="" v-model="phone" placeholder="收货人手机号" />
		</view>


		<view class="item">
			<view class="title">地区</view>
			<view class="picker">
				<picker style="width: 100%;" mode="multiSelector" :range="dmultiArray"
					@columnchange="bindMultiPickerColumnChange" :value="dmultiIndex">
					<view class="pciker-content">
						<image class="arrow" src="../../static/img/turn.png"></image>
						<view class="pciker-text" v-if="flag == 1">
							{{addressMsg.dz}}
						</view>
						<view class="pciker-text" v-if="flag == 0">
							{{dmultiArray[0][dmultiIndex[0]]}}，{{dmultiArray[1][dmultiIndex[1]]}}，{{dmultiArray[2][dmultiIndex[2]]}}，{{dmultiArray[3][dmultiIndex[3]]}}
						</view>
					</view>
				</picker>
			</view>
		</view>



		<view class="item">
			<view class="title">详细地址</view>
			<input type="text" class="item-input" value="" v-model="addressName" placeholder="如道路,门牌号,小区,村等" />
		</view>



		<view class="next" @click="next()">
			<text>保存</text>
		</view>


	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				formData: ['展示', '采集', '销售', '任务', '外卖'],
				formIndex: 0,
				isSell: 0,
				isCollect: 0,
				channelData: ['支付后', '视频号'],
				channelIndex: 1,
				channelId: '2',
				name: '',

				typeData: ['图片', '视频'],
				typeIndex: 0,
				imagePath: '', //图片本地路径
				imageId: '', //图片上传成功返回的id
				videoPath: '', //视频文件本地路径
				videoId: '', //视频上传成功返回的id
				latitude: '',
				longitude: '',
				address: '', //广告详细投放地址
				price: '', //单条广告价格
				userId: '',
				adId: '', //广告id
				adressId: '', //广告位置的id

				dnui1: [],
				dnui2: [],
				dnui3: [],
				dnui4: [],
				dmultiArray: [
					[],
					[],
					[],
					[]
				],
				dmultiIndex: [0, 0, 0, 0],
				provinceId: '',
				cityId: '',
				areaId: '',
				streetId: '',

				nickName: '',
				avatarUrl: '',


				indicatorStyle: `height: 50px;`,
				maskStyle: "",
				tdata: ['北', '北', '北', '北'],
				visible: false,
				isToutiao: true,
				isAli: true,

				id: '',
				mainid:'',
				flag: 0,
				addressMsg: {}



			}
		},
		onLoad(option) {
			this.id = option.id
			uni.getStorage({
				key: 'user',
				success: res=>{
					this.mainid = res.data.id;
					console.log("openid: ", this.mainid);
				}
			})
			this.getProvinces()
			if(option.flag == 1){
				try {
					this.flag = 1;
					this.addressMsg = uni.getStorageSync('addressMssage');
					if (this.addressMsg) {
						console.log("收到的传参",this.addressMsg);
						this.name = this.addressMsg.user_name;
						this.phone = this.addressMsg.phone;
						
						this.provinceId = this.addressMsg.province_id;
						this.cityId = this.addressMsg.city_id;
						this.areaId = this.addressMsg.area_id;
						this.streetId = this.addressMsg.street_id;
						
						let idx = this.addressMsg.address.lastIndexOf("道");
						
						this.addressName = this.addressMsg.address.substring(idx + 1,this.addressMsg.address.length);
						this.area = this.addressMsg.address.substring(idx + 1,this.addressMsg.address.length);
						this.addressMsg.dz = this.addressMsg.address.substring(0,idx + 1);
						console.log(this.addressMsg.dz);
						console.log(this.addressName);
						
					}
				} catch (e) {
					// error
				}
			}

		},
		onShow() {
			console.log("onshow..");
			this.getProvider()
		},
		onReady() {

		},
		methods: {

			getProvider() {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						this.provider = res.provider[0]
						console.log("provider: ", this.provider);
						this.isToutiao = "toutiao" == res.provider[0]
						this.isAli = "alipay" == res.provider[0]

					}

				})
			},

			tapstop() {
				return false
			},

			bindMultiPickerColumnChange(e) {
				console.log("bindMultiPickerColumnChange: ", e);
				this.flag = 0;
				this.dmultiIndex[e.detail.column] = e.detail.value;
				if (e.detail.column == 0) {
					this.provinceId = this.dnui1[e.detail.value].id;
					this.cityId = '';
					this.areaId = '';
					this.streetId = '';
					this.dmultiIndex = [e.detail.value, 0, 0, 0];
					this.getCities();
				} else if (e.detail.column == 1) {
					this.cityId = this.dnui2[e.detail.value].id;
					this.areaId = '';
					this.streetId = '';
					this.dmultiIndex[2] = 0;
					this.dmultiIndex[3] = 0;
					this.getAreas();
				} else if (e.detail.column == 2) {
					this.areaId = this.dnui3[e.detail.value].id;
					this.streetId = '';
					this.dmultiIndex[3] = 0;
					this.getStreets();
				} else if (e.detail.column == 3) {
					this.dmultiIndex[3] = e.detail.value;
					this.streetId = this.dnui4[e.detail.value].id;
					// this.darray = [{
					// 	'name': '',
					// 	'id': ''
					// }];
					// this.xiaoqu();
				}
				this.$forceUpdate()
			},

			saveOrUpdateShipInfo() {
				let addr = this.dmultiArray[0][this.dmultiIndex[0]] + this.dmultiArray[1][this.dmultiIndex[1]] + this
					.dmultiArray[2][this.dmultiIndex[2]] + this.dmultiArray[3][this.dmultiIndex[3]]
				let data = {
					"address": addr + this.addressName,
					"areaId": this.areaId,
					"cityId": this.cityId,
					"headId": "",
					"id": '',
					"name": '',
					"phone": this.phone,
					"provinceId": this.provinceId,
					"streetId": this.streetId,
					"userName": this.name,
					"userId": this.mainid
				}
				console.log("收货地址参数: ", data);
				this.$request.post(`user/saveOrUpdateShipInfo`,data,'json')
					.then(res =>{
					console.log('添加收货地址：', res)
					if (res.data.status == 200) {
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch(err=>{
					console.log(" err:",err)
				})
				
			},




			next() {
				if (this.checkDatas()) {
					this.saveOrUpdateShipInfo()
				}
			},
			checkDatas() {
				if (!this.name) {
					this.toast('请输入收货人姓名')
					return false
				}
				if (!this.phone) {
					this.toast('请输入收货人手机号')
					return false
				}
				if (this.isAli && !this.area) {
					this.toast('请输入收货地区')
					return false
				}
				if (!this.addressName) {
					this.toast('请输入详细地址')
					return false
				}
				return true

			},

			getProvinces() {
				this.$request.post(`area/areaList/`, {})
					.then(res => {
						console.log('省：', res)
						this.provinceId = res.data.data[0].id
						this.dnui1 = res.data.data;
						for (let item of res.data.data) {
							this.dmultiArray[0].push(item.name)
						}
						// this.dmultiArray[0].splice(0, 1)
						this.getCities()
					}).catch(err => {
						console.log(" err:", err)
					})
			},
			getCities() {
				console.log("provinceID: " + this.provinceId);
				this.$request.post("area/areaList/" + this.provinceId, {}, )
					.then(res => {
						this.cityId = res.data.data[0].id
						this.dnui2 = res.data.data
						let list = []
						for (let item of res.data.data) {
							list.push(item.name)
						}
						this.dmultiArray.splice(1, 1, list)
						if (!this.cityId) {
							this.cityId = res.data.data[0].id;
						} else {
							for (let i = 0; i < this.dnui2.length; i++) {
								if (this.dpickerid2 == this.dnui2[i].id) {
									this.dmultiIndex[1] = i;
								}
							}
						}
						this.getAreas()
					}).catch(err => {
						console.log(" err:", err)
					})
			},
			getAreas() {
				this.$request.post("area/areaList/" + this.cityId, {})
					.then(res => {
						this.areaId = res.data.data[0].id
						this.dnui3 = res.data.data
						let list = []
						for (let item of res.data.data) {
							list.push(item.name)
						}
						this.dmultiArray.splice(2, 1, list)
						if (!this.areaId) {
							this.areaId = res.data.data[0].id;
						} else {
							for (let i = 0; i < this.dnui3.length; i++) {
								if (this.areaId == this.dnui3[i].id) {
									this.dmultiIndex[2] = i;
								}
							}
						}
						this.getStreets()
					}).catch(err => {
						console.log(" err:", err)
					})
			},
			getStreets() {
			
				this.$request.post("area/areaList/" + this.areaId, {}, )
					.then(res => {
						this.streetId = res.data.data[0].id
						this.dnui4 = res.data.data
						let list = []
						for (let item of res.data.data) {
							list.push(item.name)
						}
						this.dmultiArray.splice(3, 1, list)
						if (!this.streetId) {
							this.streetId = res.data.data[0].id;
						} else {
							for (var i = 0; i < this.dnui4.length; i++) {
								if (this.streetId == this.dnui4[i].id) {
									this.dmultiIndex[3] = i;
								}
							}
						}
					}).catch(err => {
						console.log(" err:", err)
					})
			},

			toast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000
				});
			}


		}
	}
</script>

<style>
	.publish-page {
		background-color: #F1F1F1;
		padding-bottom: 30upx;
		/* position: relative; */
	}

	.publish-page view {
		display: flex;

	}


	.publish-page .item {
		background-color: white;
		width: 650upx;
		margin: 30upx;
		border-radius: 8upx;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 20upx;

	}

	.publish-page .item-padding {

		padding: 30upx 20upx;

	}

	.publish-page .title {
		font-size: 28upx;
	}

	.publish-page .arrow {
		width: 18upx;
		height: 30upx;
	}

	.publish-page .picker {
		flex: 1;
	}

	.publish-page .pciker-content {
		/* flex: 1; */
		width: 100%;
		flex-direction: row-reverse;
		align-items: center;
	}

	.publish-page .pciker-text {
		margin: 0 20upx;
		font-size: 28upx;
	}

	.publish-page .pciker-text-gray {
		color: #C0C0C0;
	}

	.ad-info {
		font-size: 30upx;
		font-weight: 600;
		margin: 0 30upx;
	}

	.publish-page .item-input {
		text-align: right;
		font-size: 28upx;
	}

	.publish-page .add-wrap {
		width: 100%;
		justify-content: center;
		padding: 30upx 0;
	}

	.publish-page .add-img {
		width: 158upx;
		height: 158upx;
	}

	.publish-page .icon-cloud {
		width: 48upx;
		height: 48upx;
	}

	.publish-page .video-title {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.publish-page .video-hint {
		font-size: 28upx;
		color: #F1C75E;
	}

	.publish-page .video-wrap {
		padding: 20upx 0;
	}

	.publish-page .next {
		width: 80%;
		height: 80upx;
		line-height: 80upx;
		color: white;
		background: -webkit-linear-gradient(#F1C75E, #d4a93c);
		background: -o-linear-gradient(#F1C75E, #d4a93c);
		background: -moz-linear-gradient(#F1C75E, #d4a93c);
		background: linear-gradient(#F1C75E, #d4a93c);
		font-size: 32upx;
		border-radius: 10upx;
		margin: 0 auto;
		justify-content: center;

	}

	.publish-page .btn-wrap {
		width: 500upx;
		height: 400upx;
		background-color: white;
		border-radius: 16upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.publish-page .btn-wrap .btn-title {
		font-size: 34upx;
		font-weight: 600;
	}

	.publish-page .btn-wrap .btn-hint {
		font-size: 30upx;
		padding: 0 60upx;
		margin-top: 40upx;
	}

	.publish-page .btn-wrap button {
		width: 400upx;
		height: 60upx;
		line-height: 60upx;
		margin-top: 30upx;
		font-size: 28upx;
		border-radius: 30upx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.item1 {
		color: #000000;
		line-height: 100upx;
	}

	.picker-view-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 350upx;
		background-color: white;
		flex-direction: column;
	}

	.picker-view-wrap .btn {
		width: 140upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		margin-right: 30upx;
		border-radius: 8upx;
	}

	.picker-view-wrap .btnwrap {
		width: 100%;
		justify-content: space-around;
	}

	picker-view {
		width: 100%;
		height: 350upx;
	}

	.item-ali {
		justify-content: space-between;
	}
</style>
